<!-- 快速入口 -->
<template>
  <div class="quick">
    <div class="wCen">
      <div class="card card-first animate__fadeInUp ">
        <p class="card_t">
          <span class="t1">{{ $t("quick-enter-left-t1") }}</span>
          <span class="t2" v-if="localeCn">Our Service</span>
        </p>
        <ul class="card_list">
          <!-- 参展  -->
          <li class="item" @click="jumpOutLink(boothLink)">
            <div class="imgBox">
              <img src="@/assets/images/icon_quick_12.png" alt="" class="img" />
            </div>
            <p class="txt">{{ $t("quick-enter-left-b2") }}</p>
          </li>
          <!-- 参观 -->
          <li class="item" @click="jumpOutLink(regLink)">
            <div class="imgBox">
              <img src="@/assets/images/icon_quick_13.png" alt="" class="img" />
            </div>
            <p class="txt">{{ $t("quick-enter-left-b3") }}</p>
          </li>
          <!-- 会议报名 -->
          <li class="item" @click="jumpOutLink(meetingLink)">
            <div class="imgBox">
              <img src="@/assets/images/icon_quick_11.png" alt="" class="img" />
            </div>
            <p class="txt">{{ $t("quick-enter-left-b1") }}</p>
          </li>
          <!-- 展商手册 -->
          <li class="item" @click="jumpOutLink(manualLink)">
            <div class="imgBox">
              <img src="@/assets/images/icon_quick_14.png" alt="" class="img" />
            </div>
            <p class="txt">{{ $t("quick-enter-left-b4") }}</p>
          </li>
        </ul>
      </div>
      <div class="card card-second animate__fadeInUp ">
        <p class="card_t">
          <span class="t1">{{ $t("quick-enter-right-t1") }}</span>
          <span class="t2" v-if="localeCn">PCHi China</span>
        </p>
        <ul class="card_list">
          <!-- 展商名录 -->
          <li class="item" @click="go2Exhibitor">
            <div class="imgBox" :class="{ en: localeEn && !isMobile }">
              <img src="@/assets/images/icon_quick_21.png" alt="" class="img" />
            </div>
            <p class="txt txt-second">{{ $t("quick-enter-right-b1") }}</p>
          </li>
          <!-- 展品名录 -->
          <li class="item" @click="go2Product">
            <div class="imgBox" :class="{ en: localeEn && !isMobile }">
              <img src="@/assets/images/icon_quick_22.png" alt="" class="img" />
            </div>
            <p class="txt txt-second">{{ $t("quick-enter-right-b2") }}</p>
          </li>
          <!-- 供需 -->
          <li class="item" @click="go2Demand('1,2')">
            <div class="imgBox">
              <img src="@/assets/images/icon_quick_23.png" alt="" class="img" />
            </div>
            <p class="txt txt-second">{{ $t("quick-enter-right-b3") }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfigs } from "@/api/common";
export default {
  data() {
    return {
      meetingLink: "", //参会链接
      regLink: "", //预登记链接
      manualLink: "", //manual链接
      boothLink: "", //参展链接
    };
  },
  mounted() {
    this.getConfigFun();
  },
  methods: {
    getConfigFun() {
      this.invoke(getConfigs, "meeting_cn_pc,meeting_cn_wap,meeting_en_pc,meeting_en_wap,reg_cn_pc,reg_cn_wap,reg_en_pc,reg_en_wap,manual,manual_en,booth_cn_pc,booth_en_pc,booth_cn_wap,booth_en_wap").then((res) => {
        if (res && res.code == 200) {
          if (res.data) {
            const configData = res.data;
            if (this.localeCn) {
              this.meetingLink = this.isMobile ? configData.meeting_cn_wap : configData.meeting_cn_pc;
              this.regLink = this.isMobile ? configData.reg_cn_wap : configData.reg_cn_pc;
              this.boothLink = this.isMobile ? configData.booth_cn_wap : configData.booth_cn_pc;
              this.manualLink = configData.manual;
            } else {
              this.meetingLink = this.isMobile ? configData.meeting_en_wap : configData.meeting_en_pc;
              this.regLink = this.isMobile ? configData.reg_en_wap : configData.reg_en_pc;
              this.boothLink = this.isMobile ? configData.booth_en_wap : configData.booth_en_pc;
              this.manualLink = configData.manual_en;
            }
            
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
p {
  margin: 0;
}
.quick {
  $color-1: $global_color_1;
  $color-2: $global_color_2;
  $w1: 55%;
  $w2: 45%;
  background-color: $color-1;
  position: relative;
  &:after {
    content: "";
    background-color: $color-2;
    height: 100%;
    width: $w2;
    position: absolute;
    top: 0;
    right: 0;
  }

  .wCen {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card {
    box-sizing: border-box;
    padding-top: 70px;
    padding-bottom: 60px;
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    &:first-child {
      width: $w1;
    }
    &:last-child {
      width: $w2;
    }
    &-first {
      background-color: $color-1;
    }
    &-second {
      background-color: $color-2;
      position: relative;
      z-index: 1;
      padding-left: 65px;
    }

    // 标题
    &_t {
      margin: 0;
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 50px;

      .t1 {
        font-size: 36px;
        line-height: 1em;
        margin-right: 30px;
      }

      .t2 {
        font-size: 28px;
        line-height: 1em;
      }
    }

    // 列表
    &_list {
      $w: 100%;
      width: $w;
      flex: 0 0 $w;
      box-sizing: border-box;
      display: flex;
      // justify-content: space-between;

      .item {
        box-sizing: border-box;
        $w: 150px;
        width: $w;
        height: $w;
        background: #ffffff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transform: scale(1);
        transition: transform 0.2s ease-in-out;
        &:not(:first-child) {
          margin-left: 65px;
        }

        &:hover {
          transform: scale(1.1);
        }

        .imgBox {
          $wh: 55px;
          margin-bottom: 15px;
          width: $wh;
          height: $wh;
          display: flex;
          align-items: center;
          justify-content: center;
          &.en {
            position: relative;
            top: -12px;
          }

          .img {
            max-width: 100%;
            max-height: 100%;
          }
        }

        .txt {
          text-align: center;
          font-size: 20px;
          color: $color-1;

          &-second {
            color: $color-2;
          }
        }
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    .card {
      padding-top: scale(70px);
      padding-bottom: scale(60px);
      &-second {
        padding-left: scale(65px);
      }
      &_t {
        margin-bottom: scale(50px);
        .t1 {
          font-size: scale(36px);
          margin-right: scale(30px);
        }
        .t2 {
          font-size: scale(28px);
        }
      }
      &_list {
        .item {
          $w: scale(150px);
          width: $w;
          height: $w;
          &:not(:first-child) {
            margin-left: scale(65px);
          }
          .imgBox {
            $wh: scale(55px);
            width: $wh;
            height: $wh;
          }
          .txt {
            font-size: scale(20px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    .card {
      padding-top: scale(70px);
      padding-bottom: scale(60px);
      &-second {
        padding-left: scale(65px);
      }
      &_t {
        margin-bottom: scale(50px);
        .t1 {
          font-size: scale(36px);
          margin-right: scale(30px);
        }
        .t2 {
          font-size: scale(28px);
        }
      }
      &_list {
        .item {
          $w: scale(150px);
          width: $w;
          height: $w;
          &:not(:first-child) {
            margin-left: scale(65px);
          }
          .imgBox {
            $wh: scale(55px);
            width: $wh;
            height: $wh;
          }
          .txt {
            font-size: scale(20px);
          }
        }
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }

    .card {
      padding-top: scale(70px);
      padding-bottom: scale(60px);
      &-second {
        padding-left: scale(65px);
      }
      &_t {
        margin-bottom: scale(50px);
        .t1 {
          font-size: scale(36px);
          margin-right: scale(30px);
        }
        .t2 {
          font-size: scale(28px);
        }
      }
      &_list {
        .item {
          $w: scale(150px);
          width: $w;
          height: $w;
          &:not(:first-child) {
            margin-left: scale(65px);
          }
          .imgBox {
            $wh: scale(55px);
            width: $wh;
            height: $wh;
          }
          .txt {
            font-size: scale(20px);
          }
        }
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    background-color: transparent;
    &::after{
      display: none;
    }
    .wCen{
      flex-direction: column;
      padding: 0;
    }
    .card {
      padding-top: scale(70px);
      padding-bottom: scale(60px);
      padding-left:20px;
      padding-right:20px;
      &:first-child {
        width: 100%;
      }
      &:last-child {
        width: 100%;
      }
      &-second {
        padding-left: scale(65px);
      }
      &_t {
        margin-bottom: scale(50px);
        .t1 {
          font-size: scale(36px);
          margin-right: scale(30px);
        }
        .t2 {
          font-size: scale(28px);
        }
      }
      &_list {
        justify-content: space-between;
        .item {
          $w: 70px;
          width: $w;
          height: $w;
          border-radius: 6px;
          &:not(:first-child) {
            margin-left: scale(65px);
          }
          .imgBox {
            $wh: scale(55px);
            width: $wh;
            height: $wh;
            margin-bottom: 8px;
          }

          .txt {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
